<template>
  <div class="homebox">
    我是home组件
    <div>
      <a-row>
        <a-col :span="6">
          <a-button type="primary" @click="addthing">添加</a-button>
        </a-col>
        <a-col :span="6">
          <a-button type="danger" @click="del">删除</a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12" style="background:red"> 
          我是栅格系统  我占用  12栅格
        </a-col>
         <a-col :span="12" style="background:yellow"> 
          我是栅格系统  我占用  12栅格
        </a-col>
      </a-row>
    </div>
    <ul>
      <li v-for="(v,i) in fruits" :key="fruits[i]">{{v}}</li>
    </ul>
  </div>
</template>

<script>
import shortid from "shortid";
export default {
  props: {},
  data() {
    return {
      fruits: ["pear", "apple", "melean", "banana", "orange"],
      fruitsKey: []
    };
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    addthing() {
      this.fruits.push("新水果" + shortid.generate());
      this.fruitsKey.push(shortid.generate());
    },
    del() {
      this.fruits.pop();
      this.fruitsKey.pop();
    }
  },
  created() {
    this.fruitsKey = this.fruits.map(v => {
      return shortid.generate();
    });
  },
  mounted() {},
  destroyed() {}
};
</script>

<style lang='less' scoped>
.homebox {
  ul {
    list-style: none;
  }
}
</style>
